<template>
	<div>
		<mt-swipe :auto="4000">
			<mt-swipe-item v-for="item in pic" :key="item.url">
				<img :src="item.url" />
			</mt-swipe-item>
		</mt-swipe>
		<div class="mui-content">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/test">
						<span class="mui-icon mui-icon-extra mui-icon-extra-order"></span>
						<div class="mui-media-body">文章</div>
					</router-link></li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/img">
						<span class="mui-icon mui-icon-image"></span>
						<div class="mui-media-body">图片</div>
					</router-link></li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
						<span class="mui-icon mui-icon-chatbubble"></span>
						<div class="mui-media-body">Chat</div>
					</a></li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
						<span class="mui-icon mui-icon-location"></span>
						<div class="mui-media-body">location</div>
					</a></li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
						<span class="mui-icon mui-icon-search"></span>
						<div class="mui-media-body">Search</div>
					</a></li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
						<span class="mui-icon mui-icon-phone"></span>
						<div class="mui-media-body">Phone</div>
					</a></li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pic: []
			}
		},
		created() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.$http.get("lunbo").then(result => {
					console.log(JSON.parse(result.body))
					// console.log(this.pic)
					this.pic = JSON.parse(result.body).pic
					console.log(this.pic)
				})
				this.$http.post("",{user:'sdf'}).then(res=>{console.log(res)})
			}
		}
	}
</script>

<style>
	.mint-swipe {
		height: 200px;
	}

	.mint-swipe-item img {
		width: 100%;
		height: 100%;
	}

	.mui-grid-view.mui-grid-9 {
		background-color: white;
		border: none;
	}

	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
		border: none;
	}

	/* .mint-swipe-item:nth-child(1){
		background-color: lightblue;
		line-height: 100px;
		text-align: center;
		font-size: 60px;
	}
	.mint-swipe-item:nth-child(2){
		background-color: lightcyan;
		line-height: 100px;
		text-align: center;
		font-size: 60px;
	}
	.mint-swipe-item:nth-child(3){
		background-color: lightgreen;
		line-height: 100px;
		text-align: center;
		font-size: 60px;
	} */
</style>
